<template>
  <div class="dash-total">
    <el-container>
      <!-- 左侧边栏 -->
      <el-aside class="leftSidebar" width="210px">
        <el-menu
          default-active="/"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :style="{ height: asideHeight + 'px' }"
          :router="true"
          :unique-opened="true"
        >
          <div class="head-portrait">
            <img src="../assets/img/youzan.png" />
          </div>

          <el-menu-item index="/">
            <i class="el-icon-s-grid"></i>
            <span slot="title">概况</span>
          </el-menu-item>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-shop"></i>
              <span>店铺</span>
            </template>
            <el-menu-item index="storeprofile">店铺概况</el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-sell"></i>
              <span>商品</span>
            </template>
            <el-menu-item index="goodsmanagement">商品管理</el-menu-item>
            <el-menu-item index="goodsrelease">发布商品</el-menu-item>
            <el-menu-item index="goodsgroup">商品分组</el-menu-item>
            <el-menu-item index="goodsedit">编辑商品</el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-shopping-cart-2"></i>
              <span>订单</span>
            </template>
            <el-menu-item index="ordersituation">订单概况</el-menu-item>
            <el-menu-item index="orderall">所有订单</el-menu-item>
            <el-menu-item index="orderrefundrights">退款维权</el-menu-item>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>客户</span>
            </template>
            <el-menu-item index="customermanagement">客户管理</el-menu-item>
            <el-menu-item index="customeroperation">客户运营</el-menu-item>
            <el-menu-item index="customermembers">会员管理</el-menu-item>
            <el-menu-item index="customermemberscard">会员卡</el-menu-item>
            <el-menu-item index="customercreatememberscard"
              >新建会员卡</el-menu-item
            >
          </el-submenu>

          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>设置</span>
            </template>
            <el-menu-item index="setstore">店铺信息</el-menu-item>
            <el-menu-item index="setemployees">员工管理</el-menu-item>
          </el-submenu>

          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-edit-outline"></i>
              <span>数据</span>
            </template>
            <el-menu-item index="dataprofile">数据概况</el-menu-item>
          </el-submenu>
        </el-menu>
        <!-- 使用组件 -->
        <!-- <SideBar /> -->
      </el-aside>

      <!-- 内容 -->
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

      <!-- 右侧边栏 -->
      <el-aside class="rightSidebar">
        <div class="div0">
          <el-button plain>帮助中心</el-button>
          <el-button plain @click="quit">退出系统</el-button>
        </div>
        <div class="div1">
          <button class="btn1">在线客服</button>
          <p class="p1">电话客服：0571-8998 8848</p>
        </div>
        <div class="div2">
          <img src="../assets/img/shouyinji.png" alt="" />
          <div>
            <p>评价与反馈</p>
            <p>每个声音都值得听</p>
          </div>
        </div>
        <div class="div2">
          <img src="../assets/img/shouji.png" alt="" />
          <div>
            <p>微商城手机客户端</p>
            <p>用手机随时随地管理店铺</p>
          </div>
        </div>
        <div class="div2">
          <img src="../assets/img/diannao.png" alt="" />
          <div>
            <p>桌面在线客服</p>
            <p>微商城手机客户端</p>
          </div>
        </div>
        <div class="div3">
          <p class="rightText1">有赞神厨</p>
          <div>
            <p class="rightText2">[必读]有赞上市酒会嘉宾演讲实录</p>
            <p class="rightText2">[收藏]辣妈学院的这三招你绝对想不到</p>
            <p class="rightText2">[案例]悟空家如何10天突破订单4000</p>
            <p class="rightText2">[费率]有赞商城早已不加收手续费</p>
          </div>
        </div>
        <div class="div3">
          <p class="rightText1">近期活动</p>
          <div>
            <p class="rightText2">全国 有赞运营技能提高班联动 | 招生中</p>
            <p class="rightText2">全国 有赞百万小程序沙龙联动 | 招名中</p>
            <p class="rightText2">05/31 东莞 线下运营深度沟通交流会</p>
            <p class="rightText2">05/25 深圳 百万小程序公开课</p>
          </div>
        </div>
        <div class="div3">
          <p class="rightText1">功能上新</p>
          <div>
            <p class="rightText2">05/24 微商城支持对接WiFi、蓝牙打印机</p>
            <p class="rightText2">05/22 商品搜索支持更多排序维度</p>
            <p class="rightText2">05/18 小程序瓜分券上线</p>
            <p class="rightText2">05/16 标签管理新增批量删除等功能</p>
            <p class="rightText2">05/16 优惠券/码支持指定商品不参与活动</p>
          </div>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import { mapActions } from "vuex";
// import SideBar from "../components/SideBar.vue"; //引入渲染动态菜单
export default {
  name: "DashView",
  data() {
    return {
      asideHeight: 300,
    };
  },
  created() {
    const h = window.innerHeight;

    this.asideHeight = h;
    // console.log(this.asideHeight);
  },
  components: {
    //引入子组件
    // SideBar,
  },
  methods: {
    ...mapActions(["userStore/logoutAction"]),
    quit() {
      this["userStore/logoutAction"]().then(() => {
        this.$router.push("/login");
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.dash-total {
  background-color: #f5f5f5;
}
.leftSidebar {
  // background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;

  .el-menu {
    .head-portrait {
      padding: 10px 0;
      height: 50px;
      line-height: 50px;

      img {
        height: 50px;
        width: 50px;
        border-radius: 50%;
      }
    }
  }
}

.el-main {
  background-color: #f5f5f5;
  color: #333;
  width: 70%;
  /* text-align: center; */
  /* line-height: 160px; */
}
.el-submenu {
  .el-menu-item {
    min-width: 0px;
  }
}

.rightSidebar {
  margin-top: 20px;
  height: 1150px;
  background-color: #fff;
  .div0 {
    margin: 30px;
    padding: 15px;
    text-align: center;
    background-color: #f3f3f3;
  }
  .div1 {
    margin: 30px;
    padding: 15px;
    text-align: center;
    background-color: #f3f3f3;
    .btn1 {
      width: 200px;
      height: 30px;
      color: #505050;
      background-color: #ffffff;
      border-radius: 2px;
      font-size: 14px;
      line-height: 150%;
      border: #a6a6a6 solid 1px;
      text-align: center;
    }
    .p1 {
      width: 200px;
      height: 24px;
      color: #505050;
      font-size: 14px;
      line-height: 150%;
      text-align: center;
      margin-top: 15px;
    }
  }
  .div2 {
    margin: 0 30px;
    margin-bottom: 5px;
    padding: 10px;
    text-align: left;
    background-color: #f3f3f3;
    img {
      vertical-align: middle;
    }
    div {
      display: inline-block;
      vertical-align: middle;
      :nth-child(1) {
        color: #505050;
        font-size: 16px;
        text-align: left;
      }
      :nth-child(2) {
        color: #808080;
        font-size: 13px;
        text-align: left;
      }
    }
  }
  .div3 {
    margin: 30px;
    padding: 15px;
    text-align: left;
    background-color: #f3f3f3;
    div {
      p {
        margin-bottom: 5px;
      }
    }
  }
}
.rightText1 {
  width: 70px;
  height: 30px;
  color: #505050;
  font-size: 14px;
  line-height: 150%;
  text-align: left;
  font-weight: bold;
}
.rightText2 {
  color: #505050;
  font-size: 12px;
}
</style>
